:root {
    --alpha-value: 0.5;
    --blue-color: blue;
    --green-color:rgb(195, 235, 102);
    --yellow-color: yellow;
    --red-color:red;
    --white-color: white;
    --orange-color: orange;
    --cornflowerblue-color: cornflowerblue;
    --line-height: 120px;

}

a:hover {
    color: var(--green-color)
}

/* 1. Enable smooth scrolling */
html, body {
    scroll-behavior: smooth;
    margin: 0;
    padding:0;
    border: 0;
    height: 100%;
}

.header-nav-body-footer {
    display: grid;
    grid-template-columns: 20em 1fr 1fr;
    grid-template-rows: var(--line-height) 1fr 1fr auto;
    grid-template-areas:
        "header header header"
        "nav main main"
        "nav main main"
        "footer footer footer";
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    padding: 0;
    min-height: 100%;
}

/* Make header sticky on top */
header.header {
    grid-area: header;
    /* position: sticky; */
    top:0;
    text-align: center;
    align-self: stretch;
    padding: 0;
    margin: 0;
    border: 0;
    background: var(--cornflowerblue-color); /* linear-gradient(rgba(241, 1, 1, var(--alpha-value)), rgba(255, 255, 0, var(--alpha-value)),rgba(2, 145, 2, var(--alpha-value))); */
    line-height: var(--line-height);
    font-size: 64px;
    z-index: 1000;
}



/*
** nav start
*/
/* 2. Make nav sticky */
nav.nav { 
    grid-area: nav;
    position: sticky;
    top: var(--line-height); /* 2em */
    align-self: start;
    overflow: auto;
    height: calc(var(--line-height)*5.5);
}
/* 3. ScrollSpy active styles (see JS tab for activation) */
/* nav.nav li > a.active */
.dynamic_active {
    color: var(--white-color);
    background-color: var(--red-color);
    font-weight: 800;
}
  /* Sidebar Navigation */
nav.nav {
    padding-right: 0;
    /* border-left: 1px solid #efefef; */
    border-right: 1px solid var(--red-color);
}
.nav a {
    text-decoration: none;
    /* display: block; */
    padding: .125rem 0;
    color: var(--white-color);
    transition: all 50ms ease-in-out; /* 💡 This small transition makes setting of the active state smooth */
}
.nav a:hover,
.nav a:focus {
    color: #666;
    font-weight: 800;
}

/*
    Demo for this article:
    http://blustemy.io/creating-a-table-of-contents-in-javascript/
*/
.table-of-contents {
    display: inline-block;
    padding: 0 1em;
    background: #bec472;
    border: 1px solid #ddd;
    font-size: .8em;
}

/* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters#Nesting_counters */
.table-of-contents ol {
    list-style: none;
    padding: 0;
    line-height: 1.4;
    counter-reset: counter-table-of-contents;
}

.table-of-contents ol ol {
    padding-left: 2em;
}

.table-of-contents ol li {
    margin: .5em 0;
}

.table-of-contents ol li::before {
    counter-increment: counter-table-of-contents;
    content: counters(counter-table-of-contents, ".") " ";
    opacity: .7;
}

/*
** nav end
*/

main.main { 
    grid-area: main;
    /* border: 2px solid greenyellow; */
    overflow: auto;
    padding-left: 2em;
}



/* Make footer sticky on bottom */
footer.footer {
    grid-area: footer;
    /* position: sticky; */
    bottom:0;
    align-self: stretch;
    text-align: center;
    background-color: cornflowerblue;
    line-height: var(--line-height);
    font-size: 16;
    font-size: 16px;
    z-index: 1000;
}

